<template>
  <div class="app-container home">
    <div class="home">
      <div class="container-left">
        <div class="container-icon">
          <div @click="handelTask">
            <img class="icon-size" src="@/assets/images/renwu.png" />
            <div class="icon-text">任务管理</div>
          </div>
          <div @click="handelConversion">
            <img class="icon-size" src="@/assets/images/zhuanhua.png" />
            <div class="icon-text">项目信息</div>
          </div>
          <div @click="handelApproval">
            <img class="icon-size" src="@/assets/images/lixiang.png" />
            <div class="icon-text">项目立项</div>
          </div>
          <div @click="handelKnowledge">
            <img class="icon-size" src="@/assets/images/jindu.png" />
            <div class="icon-text">知识库</div>
          </div>
          <el-badge :value="countNum" class="item" type="primary">
             <div @click="handelProgress">
            <img class="icon-size" src="@/assets/images/shenpi.png" />
            <div class="icon-text">审批管理</div>
          </div>
          </el-badge>

        </div>
        <div class="container-table">
          <el-table :data="tableData" style="width: 100%" height="500">
            <el-table-column
              prop="projectName"
              label="项目名称"
              show-overflow-tooltip
            />
            <el-table-column
              prop="projectId"
              show-overflow-tooltip
              label="项目编号"
            />
            <el-table-column
              prop="taskName"
              label="任务名称"
              show-overflow-tooltip
            />
            <!-- <el-table-column prop="priority" label="优先级">
              <template #default="scope">
                {{ priorityText(scope.row.priority) }}
              </template>
            </el-table-column> -->

            <el-table-column prop="actualStartTime" label="开始日期">
              <template #default="scope">
                {{ formatDate(scope.row.actualStartTime) }}
              </template>
            </el-table-column>

            <el-table-column prop="actualEndTime" label="结束日期">
              <template #default="scope">
                {{ formatDate(scope.row.actualEndTime) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="container-right">
        <!-- 搜素 -->
        <div class="right-search">
          <div><h4>项目动态</h4></div>
          <el-form :model="form" label-width="auto">
            <el-row>
              <el-col :span="10">
                <el-form-item label="项目成员">
                  <el-select
                    v-model="form.dynamicUserId"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="ite in Itemoptions"
                      :key="ite?.userId"
                      :label="ite?.nickName"
                      :value="ite?.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="时间">
                  <el-date-picker
                    v-model="form.dynamicTime"
                    type="date"
                    placeholder="请选择"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="margin-left: 20px"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 动态 -->
        <div class="right-dynamic" style="overflow: auto">
          <div
            :infinite-scroll-immediate="false"
            v-infinite-scroll="load"
            :infinite-scroll-disabled="disabled"
          >
            <div style="display: flex; justify-content: flex-end">
              <el-button type="primary" v-if="userStore.rolescode!=15" @click="addDynamic">新建</el-button>
            </div>
            <div class="dynamic">
              <div
                class="dynamic-content"
                v-for="item in dynamicList"
                :key="item"
              >
                <div class="content-top">
                  <div style="display: flex; align-items: center">
                    <!-- 头像 -->
                    <div class="avatar-wrapper">
                      <img :src="url + item.avatar" class="user-avatar" />
                    </div>
                    <!-- 名字 -->
                    <div style="margin-left: 5px">
                      <h5>{{ item.dynamicUserName }}</h5>
                    </div>
                  </div>
                  <!-- 时间 -->
                  <div
                    style="
                      width: 80%;
                      display: flex;
                      justify-content: flex-end;
                      align-items: center;
                    "
                  >
                    <span style="font-size: 14px; color: #8a8f8d">
                      {{ item.createTime }}
                    </span>
                  </div>
                </div>
                <div style="margin-left: 45px">
                  <!-- 发表文字 -->
                  <div style="font-size: 14px; margin-bottom: 10px">
                    {{ item.fullText }}
                  </div>
                  <!-- 发表图片 -->
                  <div class="post-images">
                    <div
                      class="post-image"
                      v-for="(it, outerIndex) in item.imgList"
                      :key="outerIndex"
                    >
                      <img :src="it.fileUrl" />
                      <!-- :preview-src-list="srcList" -->
                    </div>
                  </div>

                  <!-- 发表视频 -->
                  <div
                    v-for="(it, outerIndex) in item.videoList"
                    :key="outerIndex"
                    style="margin-top: 10px"
                  >
                    <!-- width="400" -->
                    <video controls height="300">
                      <source :src="it.fileUrl" type="video/mp4" />
                    </video>
                  </div>

                  <!-- -------发表文件------- -->
                  <div
                    class="content-img"
                    v-for="it in item.fileList"
                    :key="it"
                  >
                    <div class="file_item">
                      <img
                        src="@/assets/images/txt.png"
                        v-if="it.fileName.indexOf('txt') > 0"
                        class="type-file"
                      />

                      <img
                        src="@/assets/images/word.png"
                        v-if="it.fileName.indexOf('doc') > 0"
                        class="type-file"
                      />

                      <img
                        src="@/assets/images/pdf.png"
                        v-if="it.fileName.indexOf('pdf') > 0"
                        class="type-file"
                      />

                      <img
                        src="@/assets/images/xlsx.png"
                        v-if="it.fileName.indexOf('xls') > 0"
                        class="type-file"
                      />
                      <div class="fileName" @click="downLoad(it)">
                        {{ it.fileName }}
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 评论点赞 -->
                <div class="content-interaction">
                  <div class="content-comment">
                    <div class="content-pinglun" @click="handleInput(item)">
                      <span class="iconfont icon-pinglun"></span>
                      <div class="pinglun-number">{{ item.commentNum }}</div>
                    </div>
                    <div class="content-zan" @click="toggleLike(item)">
                      <span class="iconfont icon-dianzan"></span>
                      <div class="zan-number">{{ item.likeNum }}</div>
                    </div>
                  </div>

                  <!-- 评论区列表 -->
                  <div v-if="showInput" class="customList">
                    <el-divider class="custom-divider-color" />
                    <div v-if="item.uuid === activeCommentId">
                      <el-input
                        placeholder="写下你的评论..."
                        type="textarea"
                        v-model="comText"
                        minlength="1"
                        maxlength="50"
                        show-word-limit
                        rows="3"
                        class="custom-focus-color"
                      >
                      </el-input>
                      <div
                        style="
                          display: flex;
                          margin-top: 5px;
                          justify-content: flex-end;
                        "
                      >
                        <el-button
                          type="warning"
                          round
                          @click="addComment(item)"
                        >
                          评论</el-button
                        >
                      </div>
                    </div>

                    <div
                      class="custom-concent"
                      v-for="it in item.commentList"
                      :key="it"
                    >
                      <!-- 图片头像  -->
                      <div class="custom-wrapper">
                        <img :src="url + it.avatar" class="custom-avatar" />
                      </div>
                      <div class="custom-text">
                        <div class="text-top">
                          <span
                            style="
                              font-size: 12px;
                              font-weight: bold;
                              color: #ff8200;
                            "
                            >{{ it.comName }}：</span
                          >
                          <div class="custom-reply">{{ it.comText }}</div>
                        </div>
                        <div class="text-bottom">
                          <div class="text-time">{{ it.createTime }}</div>
                          <!-- <div class="text-reply" @click="handleReplay">
                          <span class="iconfont icon-pinglun"></span>
                        </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <p v-if="loading" style="text-align: center; font-size: 13px">
              加载中...
            </p>
            <p v-if="noMore" style="text-align: center; font-size: 13px">
              没有更多了,暂无数据
            </p>
          </div>

          <!-- 加载中 -->
          <!--加载完毕 -->
        </div>
      </div>
      <!-- 打开回复弹窗 -->
      <!-- <el-dialog
        v-model="dialogVisible"
        title="回复达尔文"
        width="500"
     
        class="right-side-dialog"
      >
        <el-input
          placeholder="发布你的回复"
          type="textarea"
          v-model="newComment"
          minlength="1"
          maxlength="50"
          show-word-limit
          rows="3"
          class="custom-focus-color"
        >
        </el-input>
        <div style="display: flex; margin-top: 5px; justify-content: flex-end">
          <el-button round type="warning"> 回复</el-button>
        </div>
      </el-dialog> -->
      <!-- 打开新建动态弹窗 -->
      <el-dialog
        v-model="dynamicDialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
        title="新建动态"
        align-center
        style="background: #fff"
      >
        <el-form
          :model="formDynamic"
          ref="formDynamicRef"
          style="max-width: 500px"
          label-width="auto"
          :rules="rules"
        >
          <el-form-item label="项目名称" prop="projectId">
            <el-select
              v-model="formDynamic.projectId"
              placeholder="请选择"
              style="width: 500px"
            >
              <el-option
                v-for="ite in options"
                :key="ite.proId"
                :label="ite.projectName"
                :value="ite.proId"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="项目描述">
            <el-input placeholder="请输入" v-model="formDynamic.fullText">
            </el-input>
          </el-form-item>

          <!-- 上传照片  -->
          <el-form-item label="上传照片">
            <el-upload
              list-type="picture-card"
              accept=".jpg,.png,.jpeg"
              v-model:file-list="formDynamic.imgList"
              :limit="9"
              :action="uploadFileUrl"
              :headers="headers"
              :on-success="handleImgUpload"
              :before-upload="beforeUpload"
              :on-exceed="handleExceed"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip text-red">
                  只能上传 jpg/png/jpeg 文件，且不超过 9 张
                </div>
              </template>
              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <!-- v-if="!disabledBtn"     v-if="!uploadDialogVisible" -->
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleImgRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <el-dialog v-model="uploadDialogVisible">
              <img
                w-full
                :src="dialogImageFile.url"
                alt="Preview Image"
                style="max-width: 100%; height: auto"
              />
            </el-dialog>
          </el-form-item>

          <!-- 上传视频 -->
          <el-form-item label="上传视频">
            <el-upload
              v-model:file-list="formDynamic.videoList"
              :action="uploadFileUrl"
              accept=".mp4,.mov,.avi"
              list-type="picture-card"
              :on-success="handleVideoUpload"
              :headers="headers"
            >
              <el-icon><Plus /></el-icon>
              <!-- <template #tip>
                <div class="el-upload__tip text-red">
                  只能上传视频文件，且不超过 2 个
                </div>
              </template> -->
              <template #file="{ file }">
                <div>
                  <video
                    class="el-upload-list__item-thumbnail"
                    style="width: 100%; height: 100%"
                    autoplay
                    :src="file.url"
                  >
                    <source :src="file.url" type="video/mp4" />
                    <source :src="file.url" type="video/mov" />
                    <source :src="file.url" type="video/avi" />
                  </video>
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleVideoPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <!-- v-if="!uploadDialogVisible" -->
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleVideoRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
            <el-dialog v-model="videoDialogVisible">
              <video
                w-full
                :src="dialogVideoFile.url"
                style="width: 100%; height: 100%"
                controls
                autoplay
              >
                <source :src="dialogImageFile.url" type="video/mp4" />
                <source :src="dialogImageFile.url" type="video/mov" />
                <source :src="dialogImageFile.url" type="video/avi" />
              </video>
            </el-dialog>
          </el-form-item>

          <!-- 上传附件 -->
          <el-form-item label="上传附件/图片">
            <fileupload
              :modelValue="formDynamic.fileList"
              @update:modelValue="handleModelValueFile"
            ></fileupload>
          </el-form-item>

          <el-row type="flex" justify="center">
            <el-form-item>
              <el-button type="primary" @click="handelSubmit(formDynamicRef)"
                >确定</el-button
              >
              <el-button @click="handelReset(formDynamicRef)">取消</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup name="Index">
import WangEdior from "@/components/WangEdior/index.vue";
import Upload from "@/components/Upload";
import { Search } from "@element-plus/icons-vue";
import fileupload from "@/components/FileUpload";
import { ElMessage, ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();

import {
  addDynamicApi,
  listDynamicApi,
  MemberItemApi,
  memberApi,
  likeApi,
  commentApi,
  itemApi,
} from "@/api/Workbench/dynamic";

import { approvalReminderApi} from "@/api/messageNotifications/notificationsList"

import { computed, onMounted } from "vue";
//@ts-ignore
import { useEmpty, dateChange } from "@/utils/index";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const version = ref("3.8.7");
const route = useRoute();
const router = useRouter();
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传文件服务器地址
const headers = ref({ Authorization: "Bearer " + getToken() });
let url = import.meta.env.VITE_APP_BASE_API;
const baseUrl = import.meta.env.VITE_APP_BASE_API;

const formRef = ref();
const formDynamicRef = ref();

const rules = reactive({
  projectId: [
    {
      required: true,
      message: "请选择项目名称",
      trigger: "change",
    },
  ],
});

// 项目转化
const handelConversion = () => {
  router.push({
    path: "/project/Zhuanhua",
  });
};

// 项目立项
const handelApproval = () => {
  router.push({
    path: "/project/lixiang",
  });
};

// 任务管理
const handelTask = () => {
  router.push({
    path: "/task",
  });
};

// 知识库
const handelKnowledge = () => {
  router.push({
    path: "/repository",
  });
};

//审批管理
const handelProgress = () => {
  router.push({
    path: "/examine",
    query:{
    waite:'1'
    }

  });
};

const countNum=ref()
const pageNum = ref(1);
const pageSize = ref(9999);

// 审批管理的角标数量提示
const approvalList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  let data = {
    searchType: 2,
  };

  const res = await approvalReminderApi(params, data);
  if (res.code === 200) {
    countNum.value = Number(res.unReadMsgNum);
  }
};


const priorityText = (priority) => {
  switch (priority) {
    case "1":
      return "最高";
    case "2":
      return "较高";
    case "3":
      return "最低";
    case "4":
      return "较低";
    default:
      return "";
  }
};

const formatDate = (dateString) => {
  if (!dateString) return ""; // 处理空日期情况，可根据实际情况调整

  const date = new Date(dateString);
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();

  // 补零操作，确保月份和日期是两位数
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;

  return `${year}-${month}-${day}`;
};

// 列表的参数
const form = reactive({
  // dynamicUserId: "",
  dynamicTime: "",
});

const formDynamic = reactive({
  projectId: "",
  fileList: [],
  imgList: [],
  videoList: [],
  fullText: "",
});

function goTarget(url) {
  window.open(url, "__blank");
}

// 获取成员
const Itemoptions = ref([]);

const handelOptions = async () => {
  const response = await memberApi();
  if (response.code === 200) {
    Itemoptions.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};

const dynamicList = ref([]);
const contentItems = ref([]);

let dynamicPageNum = ref(1);
let dynamicPageSize = ref(10);

const showInput = ref(false); // 控制输入框显示与隐藏

const comText = ref(""); // 绑定的评论输入

const activeCommentId = ref(null); //当前活动评论的id

const dynamicDialogVisible = ref(false);

const dialogVisible = ref(false);

const loading = ref(false); // 是否正在加载数据的标志
let scrollTotal;

// 改成的总数
const noMore = computed(() => dynamicList.value.length >= scrollTotal);

const disabled = computed(() => loading.value || noMore.value);

const load = () => {
  loading.value = true;
  setTimeout(async () => {
    dynamicPageNum.value += 1;
    await handelListDynamic();
    loading.value = false;
  }, 1000);
};

// 动态列表
const handelListDynamic = async () => {
  let params = {
    pageNum: dynamicPageNum.value,
    pageSize: dynamicPageSize.value,
  };
  const response = await listDynamicApi(params, form);
  if (response.code === 200) {
    dynamicList.value = dynamicList.value.concat(response.rows);
    scrollTotal = response.total;
  } else {
    ElMessage.error(response.msg);
  }
};

// 查询
const onSubmit = async () => {
  dynamicList.value = [];
  handelListDynamic();
};

// 评论
const handleInput = (val) => {
  showInput.value = !showInput.value;
  // 设置当前活动的id
  activeCommentId.value = val.uuid;
};

// 发布评论
const addComment = async (value) => {
  let params = {};
  params["msgId"] = value.uuid;
  params["type"] = 2;
  params["comText"] = comText.value;
  const response = await commentApi(params);
  // console.log(response);
  try {
    if (response.code === 200) {
      comText.value = ""; // 清空评论输入框
      // await handelListDynamic();
      // dynamicList.value.unshift(dynamicList.value);
    } else {
      ElMessage.error(response.msg);
    }
  } catch (error) {
    console.log(error);
  }
};

// 点赞
const toggleLike = async (val) => {
  val.isLiked = !val.isLiked; // 切换点赞状态
  // 点赞
  if (val.isLiked) {
    let params = {};
    params["msgId"] = val.uuid;
    params["isLike"] = "1";
    params["type"] = 2;
    const response = await likeApi(params);
    if (response.code === 200) {
      val.likeNum++;
    } else {
      ElMessage.error(response.msg);
    }
  } else {
    //未点赞
    let params = {};
    params["msgId"] = val.uuid;
    params["isLike"] = "0";
    params["type"] = 2;
    const response = await likeApi(params);
    if (response.code === 200) {
      val.likeNum--;
    } else {
      ElMessage.error(response.msg);
    }
  }
};

// 文件流下载
const downLoad = (val) => {
  if (val) {
    let url = val.fileUrl;
    axios({
      method: "get",
      url: url,
      responseType: "blob",
      headers: { Authorization: "Bearer " + getToken() },
    }).then((res) => {
      const a = document.createElement("a");
      a.href = url;
      a.download = val.fileName; // 下载后文件名
      a.style.display = "none";
      document.body.appendChild(a);
      a.click(); // 点击下载
      document.body.removeChild(a); // 下载完成移除元素
    });
  }
};

const content = ref();

const handleEditorInput = (html) => {
  content.value = html;
};

const handleReplay = () => {
  dialogVisible.value = true;
};

const value1 = ref("");
const value2 = ref("");

const tableData = ref([]);

//展示项目与任务列表
const itemList = async () => {
  // let params={
  //   userId:userStore.userId,
  //   deptId:userStore.deptId
  // }
  // params

  const response = await itemApi();
  if (response.code === 200) {
    tableData.value = response.rows;
  } else {
    ElMessage.error(response.msg);
  }
};

// 项目名称
const options = ref([]);
const handelItemOptions = async () => {
  const response = await MemberItemApi();
  if (response.code === 200) {
    options.value = response.data;
  } else {
    ElMessage.error(response.msg);
  }
};

const uploadList = ref([]);
const disabledBtn = ref(false);

const uploadDialogVisible = ref(false);

const dialogImageFile = ref("");

const dialogVideoFile = ref("");

const videoDialogVisible = ref(false);

// 打开弹窗
const addDynamic = async () => {
  dynamicDialogVisible.value = true;
  await handelItemOptions();
};

const list = ref([]);

// 上传图片
const handleImgUpload = (res, file, fileList) => {
  let fileInfoToAdd = {
    newFileName: res.fileInfo.newFileName,
    filePath: res.fileInfo.filePath,
    url: res.fileInfo.url,
    originalFilename: res.fileInfo.originalFilename,
    // 添加其他需要的 fileInfo 属性
  };
  list.value.push(fileInfoToAdd);
};

// 删除图片
const handleImgRemove = (file) => {
  formDynamic.imgList.map((item, index) => {
    console.log(index, item);
    if (item.response && item.response.data) {
      if (
        item.response.data == file.response?.data ||
        item.response.data == file.url
      ) {
        formDynamic.imgList.splice(index, 1);
      }
    } else if (item.url) {
      if (item.url == file.response?.data || item.url == file.url) {
        formDynamic.imgList.splice(index, 1);
      }
    }
  });
};

const listVideo = ref([]);

// 上传视频
const handleVideoUpload = (res, file, fileList) => {
  let fileInfoToAdd = {
    newFileName: res.fileInfo.newFileName,
    filePath: res.fileInfo.filePath,
    url: res.fileInfo.url,
    originalFilename: res.fileInfo.originalFilename,
    // 添加其他需要的 fileInfo 属性
  };
  listVideo.value.push(fileInfoToAdd);
};

// 删除视频
const handleVideoRemove = (file) => {
  formDynamic.videoList.map((item, index) => {
    if (item.response && item.response.data) {
      if (
        item.response.data == file.response?.data ||
        item.response.data == file.url
      ) {
        formDynamic.videoList.splice(index, 1);
      }
    } else if (item.url) {
      if (item.url == file.response?.data || item.url == file.url) {
        formDynamic.videoList.splice(index, 1);
      }
    }
  });
};

// 上传文件
const handleModelValueFile = (val, result, operationType) => {
  console.log(val, result);
  if (operationType === "success") {
    if (result) {
      formDynamic.fileList = [];
      result.forEach((item)=>{
        formDynamic.fileList.push(item);
      });
      // formDynamic.fileList.push(result);
    }
  } else if (operationType === "delete") {
    formDynamic.fileList.splice(result, 1);
  }
};

const beforeUpload = (file) => {
  // 在上传之前检查文件数量
  if (formDynamic.imgList.length >= 9) {
    ElMessage.warning("只能上传九张图片哦");
    return false; // 阻止上传
  }
  return true; // 允许上传
};

// 预览图片
const handlePreview = (file) => {
  dialogImageFile.value = file;
  uploadDialogVisible.value = true;
};

// 预览视频
const handleVideoPreview = (file) => {
  dialogVideoFile.value = file;
  videoDialogVisible.value = true;
};

const handleExceed = (files, uploadFiles) => {
  ElMessage.warning("只能上传九张图片哦！");
};

// 确认
const handelSubmit = async (formEl) => {
  console.log(formEl, "-formEl--");
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      const response = await addDynamicApi({
        ...formDynamic,
        imgList: list.value,
        videoList: listVideo.value,
      });
      if (response.code === 200) {
        // 添加成功的提示
        ElMessage.success(response.msg);
        // 弹窗关闭
        dynamicDialogVisible.value = false;
        formDynamic.projectId = "";

        formDynamic.fullText = "";
        formDynamic.fileList = [];
        formDynamic.imgList = [];
        formDynamic.videoList = [];

        //projectId 清空校验
        formEl.resetFields();

        // 刷新列表
        dynamicList.value = [];
        await handelListDynamic();
      } else {
        ElMessage.error(response.msg);
      }
    } else {
      console.log("error submit!");
    }
  });
};

// 取消
const handelReset = () => {
  dynamicDialogVisible.value = false;
  formDynamic.projectId = "";
  formDynamic.fullText = "";
  formDynamic.fileList = [];
  formDynamic.imgList = [];
  formDynamic.videoList = [];
  if (!formEl) return;
  formEl.resetFields();
};

const handleClose = () => {
  dynamicDialogVisible.value = false;
  formDynamic.projectId = "";
  formDynamic.fullText = "";
  formDynamic.fileList = [];
  formDynamic.imgList = [];
  formDynamic.videoList = [];
};

onMounted(async () => {
  await approvalList()
  await handelListDynamic();
  await handelOptions();
  await itemList();
});
</script>
<style >
.post-images {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.post-image {
  width: calc(33.33% - 10px); /* 每张图片占据1/3的宽度，减去间隙 */
  margin-right: 10px; /* 设置图片之间的间隙 */
  margin-bottom: 10px; /* 设置图片下方的间隙 */
  height: 150px; /* 或者其他固定高度 */
  overflow: hidden; /* 确保图片超出部分被隐藏 */
  border-radius: 10px;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使用 cover 保持图片比例填充整个容器，超出部分会被裁剪 */
  border-radius: 10px;
}

/* 自定义聚焦时的边框颜色 */
.custom-focus-color .el-textarea__inner:focus {
  border-color: #ff8200;
  box-shadow: 0 0 2px rgba(255, 130, 0);
}

.el-divider--horizontal {
  margin: 0px;
}
.custom-divider-color {
  color: #f9f9f9; /* 红色 */
  border-color: #f9f9f9; /* 红色 */
}

.fileName {
  color: #337ab7;
  cursor: pointer;
}

.el-dialog {
  /* left:60%; */
  /* right: 60%; */
  border-radius: 10px;
  background-color: #fff;
}
.el-dialog__title {
  font-weight: 700;
  color: #333;
  font-size: 15px;
}
</style>


<style scoped lang="scss">
:deep(.hideUpload .el-upload--picture-card) {
  display: none;
}
:deep(.el-upload--picture-card) {
  width: 243px;
  height: 180px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 243px;
  height: 180px;
}

.home {
  display: flex;
  width: 100%;
  max-height: calc(100vh - 50px - 39px);
}
.customButton .el-button {
  color: #fff !important;
}
.container-left {
  width: 50%;
}
.container-icon {
  display: flex;
  justify-content: space-between;
  align-content: center;
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
}
.container-table {
  margin-top: 15px;
  background-color: #fff;
  border-radius: 10px;
  height: calc(100vh - 260px);
}
.container-right {
  width: 50%;
  // background-color: #fff;
  margin-left: 10px;
}
.container-dynamic {
  padding: 0px 30px;
}
.icon-text {
  font-size: 12px;
  color: #909399;
}
.icon-size {
  width: 46px;
  height: 47px;
  // border-radius: 200px;
}
.right-search {
  background-color: #fff;
  border-radius: 10px;
  padding: 8px;
}
.right-dynamic {
  background-color: #fff;
  border-radius: 10px;
  padding: 8px;
  margin-top: 15px;
  height: calc(100vh - 260px);
  overflow-y: scroll; /* 显示垂直滚动条 */
  &::-webkit-scrollbar {
    --el-scrollbar-opacity: 0.1;
    --el-scrollbar-bg-color: var(--el-text-color-secondary);
    --el-scrollbar-hover-opacity: 0.5;
    --el-scrollbar-hover-bg-color: var(--el-text-color-secondary);
  }

  &::-webkit-scrollbar-thumb {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: 5px;
    background: rgba($color: #909399, $alpha: 0.2);
    transition: var(--el-transition-duration) background-color;
    opacity: var(--el-scrollbar-opacity, 0.3);
  }
}
.dynamic {
  // height: calc(100vh - 300px);
  // 超出加滚动条
}

.dynamic-content {
  background-color: #fafafa;
  border-radius: 10px;
  margin-top: 10px;
  padding: 8px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.content-top {
  display: flex;
  width: 100%;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.content-interaction {
  background-color: #fff;
  width: 100%;
  margin: 15px 0px;
  border-radius: 10px;
}
.content-comment {
  display: flex;
  justify-content: space-between;
  padding: 8px;
}
.content-pinglun {
  display: flex;
  align-items: center;
}
.content-pinglun:hover {
  color: #ff8200; /* 鼠标悬停时的背景颜色 */
}

.content-zan {
  display: flex;
  align-items: center;
}

.content-zan:hover {
  color: #ff8200; /* 鼠标悬停时的背景颜色 */
}
.pinglun-number {
  margin-left: 10px;
}
.zan-number {
  margin-left: 10px;
}
.img_wrap_one {
  height: 130px;
  width: 30%;
  size: 50%;
  margin-right: 2%;
  border-radius: 10px;
}
.customList {
  padding: 8px;
}
.custom-concent {
  display: flex;
  margin-top: 8px;
  .custom-text {
    width: 100%;
    margin-left: 10px;
    .text-top {
      display: flex;
    }
    .text-bottom {
      display: flex;
      justify-content: space-between;

      .text-reply {
        display: flex;
      }
      .text-reply:hover {
        color: #ff8200;
      }
      .text-time {
        color: #939393;
        font-size: 12px;
      }
    }
  }
  .custom-avatar {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .custom-reply {
    color: #333;
    font-size: 13px;
  }
}
.file_item {
  display: flex;
  align-items: center;
}
.type-file {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}
</style>

